<template>
  <div :class="['h-flow-pre-submit-user-selector', {
    'h-flow-pre-submit-user-single-selector': value.multiple === false
  }]">
    <div style="padding: 5px 5px 0px 5px">
      <InputSearch style="width: 100%" v-model="searchText" placeholder="搜索"/>
    </div>
    <Table :scroll="{y: 380}" :pagination="pagination" size="small" :custom-row="customRow"
           bordered :dataSource="searchData" row-key="id" :row-selection="{selectedRowKeys, onChange: select}"
           style="margin: 5px" :columns="columns" @change="pageChange"/>
  </div>
</template>
<script>
import {Input, Table} from 'ant-design-vue';
import {createModelProps, createPagination, createProps, isEmpty} from '@/utils';

export default {
  name: 'UserSelector',
  components: {
    Table,
    InputSearch: Input.Search
  },
  model: createModelProps(),
  props: {
    dataSource: createProps(Array),
    value: createProps(Object, () => ({
      nodeId: undefined,
      nodeName: undefined,
      userMenuSelectReason: undefined,
      users: [],
      multiple: false,
    }))
  },
  data() {
    return {
      pagination: createPagination(),
      searchText: undefined,
      selectedRowKeys: []
    };
  },
  methods: {
    customRow(record) {
      return {
        on: {
          click: () => {
            let index;
            if ((index = this.selectedRowKeys.indexOf(record.id)) !== -1) {
              this.selectedRowKeys = this.selectedRowKeys.splice(index, 1) && [...this.selectedRowKeys];
            } else {
              this.selectedRowKeys = [...this.selectedRowKeys, record.id];
            }
          },
        }
      };
    },
    pageChange(pagination) {
      this.pagination = pagination;
    },
    select(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    setRows(rows) {
      let res = {...this.value};
      res.users = rows;
      this.$emit('change', res);
    }
  },
  computed: {
    columns() {
      let res = [
        {
          title: '用户名',
          dataIndex: 'username'
        }
      ];
      if (this.dataSource && this.dataSource.length) {
        let properties = this.dataSource[0].properties;
        if (!isEmpty(properties)) {
          properties.forEach((p, index) => {
            res.push({
              title: p.title,
              customRender: (data, row) => {
                try {
                  return row.properties[index].value;
                } catch (e) {
                }
                return '';
              },
            });
          });
        }
      }
      return res;
    },
    searchData() {
      let list = this.dataSource || [];
      if (!this.searchText) return this.dataSource;
      return list.filter(item => JSON.stringify(item).indexOf(this.searchText) !== -1);
    },
  },
  watch: {
    selectedRowKeys() {
      if (this.value.multiple === false && this.selectedRowKeys.length > 1) {
        this.selectedRowKeys = [this.selectedRowKeys[1]];
      }
      let rows = this.dataSource.filter(item => this.selectedRowKeys.indexOf(item.id) !== -1);
      this.setRows(rows);
    },
  }
};
</script>
<style>
.h-flow-pre-submit-user-single-selector .ant-table-column-title .ant-table-selection {
  display: none;
}

.h-flow-pre-submit-user-selector {

}
</style>